<template>
	<el-breadcrumb :separator-icon="ArrowRight" style="margin-bottom: 20px;">
		<el-breadcrumb-item :to="{ path: '/standardization/database' }" v-if="depth>0">选取数据库</el-breadcrumb-item>
		<el-breadcrumb-item :to="{ path: '/standardization/table' }" v-if="depth>1">选取表</el-breadcrumb-item>
		<el-breadcrumb-item :to="{ path: '/standardization/aline' }" v-if="depth>2">标准化</el-breadcrumb-item>
		<!-- <el-breadcrumb-item v-for="(item, index) in breadList" :key="index" :to="{ path: item.path }">{{ item.name }}
		</el-breadcrumb-item> -->
	</el-breadcrumb>
	<RouterView/>

</template>
  
<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { ref, watch, onMounted } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const depth = ref(1)
const breadList = ref([])

const getBreadcrumb = () => {
	let matched = route.matched; //拿到显示的路由路径
	// console.log('matched', matched)
	// if(!this.isHome(matched[0])){//当前路由等于首页
	//   matched = [{ path: "/home", meta: { title: "首页" } }].concat(matched);
	// 	}
	breadList.value = matched;
	depth.value = breadList.value[breadList.value.length-1].meta.breadNum
	// console.log(depth)
}
onMounted(() => {
	getBreadcrumb()
})
// getBreadcrumb
watch(route, () => {
	getBreadcrumb()
})
</script>